import { useEffect, useState, FunctionComponent, useCallback } from 'react';
import cn from 'classnames';
import { TextWidget } from '@inbiz/react';
import { useDebounceEffect } from 'ahooks';
import { fetchSearchKeyHotWord } from '../../../../designer/service';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useHotKeywordsPosition } from '../../../../store/hooks/useHotKeywordsPosition';
import { useJumpResult } from '../../../../store/hooks/useJumpResult';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import { useHotKeywordsNumber } from '../../../../store/hooks/useHotKeywordsNumber';
import { useConfigEventsApi } from '../../../../store/hooks/useSearchPropsState';

interface Props {
  layout?: 'inside' | 'outside';
  onClick?: (keyword: string) => void;
}

// 热门搜索组件
const HotKeywords: FunctionComponent<Props> = (props) => {
  const { configEventsApi } = useConfigEventsApi();
  const [hotKeywords, setHotKeywords] = useState<string[]>([]);
  const { selectShowTab, ecmSearchType, keyword } = useSearchUIState();
  const updateUIState = useSearchUIDispatch();
  const hotKeywordNumber = useHotKeywordsNumber();
  const fetchHotKeywords = useCallback(() => {
    configEventsApi({
      request: fetchSearchKeyHotWord,
      params: {
        Size: hotKeywordNumber || 8,
      },
      keys: ['onHotWordParams', 'onHotWord', 'onHotWordData'],
    }).then((res) => {
      if (res.Code == 0) {
        setHotKeywords(res.Data || []);
      }
    });
  }, [ hotKeywordNumber, ecmSearchType]);

  useDebounceEffect(
    () => {
      fetchHotKeywords();
    },
    [keyword],
    {
      wait: 300,
    },
  );

  const setKeyword = useCallback(
    (nextKeyword) => {
      updateUIState({
        keyword: nextKeyword,
        keywords: [nextKeyword],
      });
    },
    [updateUIState],
  );

  const onJumpResult = useJumpResult(setKeyword);

  const position = useHotKeywordsPosition();
  return (
    <div
      className={cn('hot-keyword-container', {
        ['bottom']: position === 'bottom',
        ['inside']: position === 'inside',
        ['bottom-ad-search']:
          selectShowTab?.advancedSearchStyle === 'style2' && position === 'bottom',
      })}
    >
      {position !== 'inside' && (
        <div className={cn('title')} style={{ color: '#aaa' }}>
          <TextWidget>SearchEngine.HotKeywords</TextWidget>
        </div>
      )}
      <div className="list">
        {position === 'inside' && (
          <div key={'HotKeywords'} style={{ color: '#aaa' }} className={cn('title', 'titleitem')}>
            <TextWidget>SearchEngine.HotKeywords</TextWidget>
          </div>
        )}
        <div className='hotKeywordItems'>
          {hotKeywords.map((item, index) => {
            return (
              <span
                key={`${item}-${index}`}
                onClick={() => {
                  onJumpResult(item, [item]);
                  updateUIState({
                    showSearchResultPanel: false,
                  });
                }}
                className={'item'}
                title={item}
              >
                {item}
              </span>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default HotKeywords;
